
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="static/css/active.css">
    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
    <script src="static/js/vue.min.js"></script>
    <script src="static/js/stop.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Fredoka+One&display=swap" rel="stylesheet">
    <title>花瓣||活动</title>
</head>

<body>
    <div class="content" id="app">
        <div class="content-l">
            <h2>{{active.title}}</h2>
            <br>
            <span> {{active.imfomation}}</span>
            <div class="circle"></div>
            <button></button>
        </div>
        <div class="content-r">
            <div class="img" v-for="(image, index) in imageList">
                <img :key="index" :src="image" alt="Event Image" class="event-image" @error="handleImageError">
            </div>
        </div>
    </div>
    </div>

</body>

<script>
    new Vue({
        el: '#app', 
        data() {
            return {
                active: {}, 
                imageList: [] 
            };
        },
        mounted() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                axios.get('/actives/active') 
                    .then(response => {
                        const data = response.data;
                        this.active = data.active; 
                        this.imageList = data.imageList;
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            },
            handleImageError(event) {
                event.target.src = 'http://example.com/default-image.jpg'; 
            }
        }
    });
</script>
<script src="static/js/active.js"> </script>
</html>